<!DOCTYPE html>
<style>

#container {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

#content {
  width: 750px;
  height: 10000px;
  background-color: blue;
}

</style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<div id="container">
  <div id="content"></div>
</div>
<div id="console"></div>
<script>

jsTestIsAsync = true;
element = document.getElementById("container");

var prevScrollTop;
var scrollStart;

function runTest() {
    internals.settings.setScrollAnimatorEnabled(true);

    element.addEventListener("scroll", onElementScroll);

    runAfterLayoutAndPaint(function() {
        // Give the container focus.
        eventSender.mouseMoveTo(100, 100);
        eventSender.mouseDown();
        eventSender.mouseUp();

        eventSender.keyDown('End');
    });
}

function onElementScroll() {
    if (prevScrollTop === undefined) {
        shouldNotBe("element.scrollTop",
                    "element.scrollHeight - element.clientHeight");
        shouldBeGreaterThan("element.scrollTop", "0");
        prevScrollTop = element.scrollTop;
    } else {
        shouldBeGreaterThan("element.scrollTop", "prevScrollTop");
        finishJSTest();
    }
}

description("Tests that overflow scrolls are animated.");

if (window.eventSender)
    runTest();
else
    debug("FAIL: This test requires window.eventSender.");

</script>
